<template>
  <h3>卡片</h3>
  <t-space direction="vertical">
    <t-tabs :value="value" type="border-card" @change="handlerChange">
      <t-tab-panel v-for="item of businessList" :label="item.business_name" :key="item.id">
<!--        <t-card v-for="dataitem of item.business_data_list" :aria-label="dataitem.data_name" :key="dataitem.id">-->
<!--          <div slot="header" class="clearfix">-->
<!--            <span> {{dataitem.data_name}} </span>-->
<!--            <t-checkbox>选择</t-checkbox>-->
<!--          </div>-->
<!--        </t-card>-->

<!--        <div class="demo-card" v-for="dataitem of item.business_data_list" :aria-label="dataitem.data_name" :key="dataitem.id">-->
<!--          <t-card :title="title" :bordered="false" hover-shadow :style="{ width: '200px' }">-->
<!--            {{ infoMessage }}-->
<!--            <template #actions>-->
<!--              <t-checkbox>选择</t-checkbox>-->
<!--            </template>-->
<!--          </t-card>-->
<!--        </div>-->
        <t-card v-for="dataitem of item.business_data_list" :aria-label="dataitem.data_name" :key="dataitem.id">
          <p>{{dataitem.data_name}}</p>
          <p>{{dataitem.describe}}</p>
        </t-card>
      </t-tab-panel>
    </t-tabs>
  </t-space>
</template>
<script setup lang="ts">
import { ref } from 'vue';

import { MessagePlugin, CardProps } from 'tdesign-vue-next';
const clickHandler = () => {
  MessagePlugin.success('操作');
};
const title: CardProps['title'] = '标题';
const infoMessage = `仅有内容区域的卡片形式。`;



const handlerChange = (newValue) => {
  value.value = newValue;
};


import { ref } from 'vue'
let businessList = [
  {
    "id": 1,
    "business_name": "访客",
    "business_data_list": [{
      "id": 1,
      "business_id": 1,
      "data_name": "电子访客",
      "describe": "访客来访数据"
    },
      {
        "id": 2,
        "business_id": 1,
        "data_name": "自助机",
        "describe": "访客来访数据"
      },
      {
        "id": 9,
        "business_id": 1,
        "data_name": "电子访客",
        "describe": "测试链接"
      },
      {
        "id": 15,
        "business_id": 1,
        "data_name": "2023年电子访客预约单记录",
        "describe": "导出内容：2023年电子访客预约单记录"
      }
    ]
  },
  {
    "id": 2,
    "business_name": "餐饮",
    "business_data_list": [{
      "id": 3,
      "business_id": 2,
      "data_name": "餐饮订单数据",
      "describe": "内容"
    },
      {
        "id": 12,
        "business_id": 2,
        "data_name": "离职名单消费明细",
        "describe": "导出内容：user_no，user_name，(order_amount/100)，deal_time，pay_channel"
      },
      {
        "id": 13,
        "business_id": 2,
        "data_name": "早餐",
        "describe": "导出内容：时间,餐厅 餐线, 菜品名,价格, 销量 "
      }
    ]
  },
]

const handleClick = (evt: Event) => {
  console.log((evt.target as HTMLInputElement).value)
}

const chooseChecked = (item) => {
  console.log("点击了选中")
}
</script>
<style lang="less">
.tabs-icon-margin {
  margin-right: 4px;
}
</style>
